<template>
  <div class="product-stencil">
    <div class="header-breadcrumb">
      <Breadcrumb :headerTitle="headerTitle" />
    </div>
    <div class="navigation-title">产品模板设置</div>
    <div class="line-between"></div>
    <!-- 搜索栏 -->
    <div class="navigation-search">
      <div class="search-left">
        <div class="navigation-search-input">
          <el-input
            placeholder="搜索店铺名称"
            suffix-icon="el-icon-search"
            v-model="value"
          >
          </el-input>
        </div>
        <div class="navigation-search-input">
          <span>站点:</span>
          <el-select v-model="value" clearable placeholder="请设置站点">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="navigation-search-input">
          <span>模板:</span>
          <el-select v-model="value" clearable placeholder="请选择状态">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="navigation-search-input">
          <span>所属店铺:</span>
          <el-select v-model="value" clearable placeholder="请选择状态">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="navigation-search-input">
          <el-button type="primary">搜索</el-button>
        </div>
      </div>
      <div class="navigation-search-right">
        <el-button type="primary" plain @click="isStencilNewShow = true"
          >新建产品模板</el-button
        >
      </div>
    </div>
    <!-- 数据列表 -->
    <div class="product-stencil-date">
      <el-table
        ref="multipleTable"
        :data="productTempData"
        border
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="stencilSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="模板名称" width="120">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="name" label="模板类型" width="120">
        </el-table-column>
        <el-table-column prop="address" label="站点"> </el-table-column>
        <el-table-column prop="address" label="创建时间"> </el-table-column>
        <el-table-column prop="address" label="创建人"> </el-table-column>
        <el-table-column prop="address" label="所属店铺"> </el-table-column>
        <el-table-column prop="address" label="操作" width="150">
          <template slot-scope="">
            <div class="shop-active">
              <el-button type="primary" size="mini">编辑</el-button>
              <el-button type="warning" size="mini">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 新建产品模板 -->
    <div class="product-stencil-new">
      <el-dialog
        title="新建产品模板"
        :close-on-click-modal="false"
        :visible.sync="isStencilNewShow"
        width="45%"
      >
        <NewProduct ref="newProductRef" />
        <span slot="footer" class="dialog-footer">
          <el-button @click="isStencilNewShow = false">取 消</el-button>
          <el-button type="primary" @click="onSaveProductTemp"
            >保存模板</el-button
          >
        </span>
      </el-dialog>
    </div>
    <InsertAttributes />
  </div>
</template>

<script>
import Breadcrumb from '@/components/breadcrumb';
import NewProduct from './new-product.vue';
import Product from '@/api/product';
import Way from '@/utils/way';
import InsertAttributes from '@/components/insert-attributes';

export default {
  name: 'productStencil',
  components: { Breadcrumb, NewProduct, InsertAttributes },
  props: {},
  data() {
    return {
      headerTitle: ['管理设置', '产品模板设置'],
      value: '',
      options: [
        {
          value: '选项1',
          label: '黄金糕',
        },
        {
          value: '选项2',
          label: '双皮奶',
        },
        {
          value: '选项3',
          label: '蚵仔煎',
        },
        {
          value: '选项4',
          label: '龙须面',
        },
        {
          value: '选项5',
          label: '北京烤鸭',
        },
      ],
      productTempData: [],
      page: 1, // 页数
      limit: 10, // 条数
      isStencilNewShow: false, // 新建产品模板
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getProductTemp();
  },
  methods: {
    stencilSelectionChange(val) {},
    // 获取产品模板
    getProductTemp() {
      const params = {
        page: this.page,
        limit: this.limit,
        template_name: '',
        shop_id: '',
        site: '',
      };
      const that = this;
      Product.getProductTemplateList(params).then((res) => {
        console.log(res);
        if (res.code == 200) {
          that.productTempData = res.data.rows;
        } else {
          Way.setMessage(res.msg, 3);
        }
      });
    },

    // 保存模板
    onSaveProductTemp() {},
  },
  mounted() {},
};
</script>

<style scoped lang="less">
@import '@/style/navigation-search.less';
.product-stencil {
  // 数据列表
  .product-stencil-date {
    padding-top: 24px;
  }
}
</style>
